<template>
    <div class="tongjitable-wrap" v-loading="loading">
        <div class="header">
            <flexbox>
                <img src="@/assets/images/beijixing/beijixing-icon.png" style="width: 24px" />
                <span class="margin-l-8 font-w-b">版本交付质量指标</span>
            </flexbox>
        </div>
        <div class="cont">
            <a-table rowKey="id" size="small" :columns="tableColumns" :data-source="list" :pagination="paginationConfig" @change="handleTableChange">
            </a-table>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { useRoute } from 'vue-router';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const route = useRoute();
        const state = reactive<any>({
            list: [],
            paginationConfig: {
                total: 0,
                pageSize: 20, // 每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'], // 每页中显示的数据
                showTotal: (total: number) => `共有 ${total} 条数据`, // 分页中显示总的数据
                current: 1
            },
            loading: false
        });

        const tableColumns = [
            {
                title: '版本号',
                dataIndex: 'versionNumber'
            },
            {
                title: '版本名称',
                dataIndex: 'versionName'
            },
            {
                title: '缺陷率',
                dataIndex: 'faultRate'
            },
            {
                title: '生产缺陷逃逸率',
                dataIndex: 'prodFaultEscapeRate'
            },
            // {
            //     title: '缺陷密度(个/KLOC）',
            //     dataIndex: 'faultKloc',
            // },
            {
                title: '缺陷修复率',
                dataIndex: 'faultRepairRate'
            }
        ];
        const getList = async () => {
            state.loading = true;
            const { ...query } = route.query;
            const { success, moule, totalCount } = await api.portalControlModel.selectQualityPage({
                ...query,
                pageNum: state.paginationConfig.current,
                pageSize: state.paginationConfig.pageSize
            });
            if (success) {
                state.list = [...moule];
                state.paginationConfig.total = totalCount;
            }
            state.loading = false;
        };

        const handleTableChange = (val) => {
            state.paginationConfig = val;
            getList();
        };
        watch(
            () => props.detail,
            () => {
                getList();
            },
            { deep: true, immediate: true }
        );
        return {
            tableColumns,
            ...toRefs(state),
            handleTableChange
        };
    }
});
</script>

<style scoped lang="less">
.tongjitable-wrap {
    .header {
        padding: 16px;
    }
    .cont {
        padding: 12px;
    }
}
</style>
